<route lang="json5">
{
  path: '/often/table/:id(\\d+|add)',
  props: true,
  meta: {
    auth: true,
    hidden: true,
  },
}
</route>

<template>
  <div class="h-full overflow-y-scroll py-6">
    <a-form ref="formRef" :model="formData" auto-label-width :style="{ width: '24rem' }" @submit="handleSubmit">
      <a-form-item field="name" label="NAME" :rules="{ required: true, message: 'NAME必填' }">
        <a-input v-model="formData.name" placeholder="please enter name..." />
      </a-form-item>
      <a-form-item field="content" label="CONTENT" :rules="{ required: true, message: 'CONTENT必填' }">
        <a-textarea
          v-model="formData.content"
          placeholder="Please enter content..."
          :max-length="100"
          :auto-size="{
            minRows: 3,
            maxRows: 6,
          }"
          show-word-limit
        />
      </a-form-item>
      <a-form-item field="ip" label="IP" disabled>
        <a-input v-model="formData.ip" />
      </a-form-item>
      <a-form-item field="phone" label="PHONE" :rules="{ match: verifyPhone, message: '请输入正确的手机号' }">
        <a-input v-model="formData.phone" placeholder="please enter phone..." />
      </a-form-item>
      <a-form-item field="time" label="TIME">
        <a-date-picker
          v-model="formData.time"
          show-time
          :time-picker-props="{ defaultValue: '23:58:59' }"
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="Please select time"
        />
      </a-form-item>
      <a-form-item field="status" label="STATUS">
        <a-radio-group type="button" v-model="formData.status">
          <a-radio :value="0">CLOSE</a-radio>
          <a-radio :value="1">OPEN</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button @click="reset" status="warning">重置</a-button>
          <a-button status="success" html-type="submit">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { getMockById, type IGetMockList } from 'api/test1'
import { cloneDeep } from 'lodash-es'

const router = useRouter()
const verifyPhone = verify_phone

const props = defineProps<{ id: number | 'add' }>()
const id = (Number(props.id) || '') + ''

const DEFAULT_VALUE: IGetMockList = {
  id,
  name: '',
  content: '',
  ip: '',
  phone: '',
  time: '',
  status: 0,
}

const formData = reactive<IGetMockList>(cloneDeep(DEFAULT_VALUE))

async function reset() {
  if (Number(id)) {
    const res = await getMockById(id)
    Object.assign(formData, res)
  } else {
    Object.assign(formData, cloneDeep(DEFAULT_VALUE))
  }
}

const { closeTab } = useGlobal()
async function handleSubmit({ values, errors }: any) {
  if (errors) return
  await getMockById(id)
  Modal.info({
    content: '保存成功',
    onClose: closeTab,
  })
}

reset()
</script>
